<template>
  <div class="ac-container">
    <el-container
      style="height: 100%"
    >
      <el-container style="height: 100%">
        <div>
          <HeadSidebar :isCollapse="isCollapse" />
        </div>
        <div style="width:100%">
          <HeadHeader @clickOpenMenu="openMenu" :isCollapse="isCollapse" />
        
          <div class="ac-main">
            <router-view :key="key" />
          </div>
        </div>
        
      </el-container>
    </el-container>
    <!-- <el-container v-else-if="routeName == 'login' || !store.loginStatus">
      <router-view :key="key" />
    </el-container>

    <el-container v-else>
      <router-view :key="key" />
    </el-container> -->
  </div>
</template>
<script setup lang="ts">
import { isMobile, watchResize } from '@bassist/utils'
import { useMessageStore } from '@/stores'

import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const store = useMessageStore()
let isCollapse = store.isCollapsexx?ref(store.isCollapsexx):ref(false)
// let isCollapsexxdd=store.isCollapsexx
const route = useRoute()
const key = computed(() => `${String(route.name || route.path)}-${new Date()}`)
const routeName = computed(() => `${String(route.name || route.path)}`)

watchResize(() => {
  document.body.className = `platform-${isMobile() ? 'mobile' : 'desktop'}`
})
console.info('key:', key)

const openMenu = (isCheckTemp: any) => {
  isCollapse.value = isCheckTemp
  store.isCollapsexx=isCheckTemp
  // isCollapsexxdd.value=store.isCollapsexx
  console.log('ischeck:', isCheckTemp, '--', isCollapse.value)
}
</script>
